<template>
  <div class="collect">
    <!-- <h3></h3> -->
      <!-- <el-popover placement="top" width="160" v-model="shanchu">
                <p>亲！您确定要删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="shanchu= false">取消</el-button>
                  <el-button type="primary" size="mini" @click="delCollect(index)">确定</el-button>
                </div>
                <el-button slot="reference" type="text"><i class="el-icon-delete"></i></el-button>
              </el-popover> -->
    <el-divider class="mydis">我的收藏</el-divider>
   
    <el-row class="order" :gutter="40" v-if="isExistCollect">
      <el-col :span="8" class="orderlist" v-for="(product,index) in products" :key="index">
        <el-card :body-style="{ padding: '10px' }">
          <img :src="getPic(product.productPic)" class="image" />
          <div style="padding: 14px;">
            <span>{{product.productName}}</span>
            <span>￥{{product.price}}</span>
            <div class="bottom clearfix">
              <el-button type="text" class="button">查看更多信息</el-button>
              <el-popover placement="top" width="160" v-model="visible[index]">
                <p>亲！您确定要删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="$set(visible,index,false)">取消</el-button>
                  <el-button type="primary" size="mini" @click="delCollect(index)">确定</el-button>
                </div>
                <el-button slot="reference" type="text"><i class="el-icon-delete"></i></el-button>
              </el-popover>
              <!-- <el-button type="text" @click="delCollect(index)"><i class="el-icon-delete"></i></el-button> -->
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row v-if="!isExistCollect">
      <el-col :span="24">
        <div class="ww">收藏空空如也</div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      products: [],
      visible:[false,false,false,false],
      isExistCollect: false
    };
  },
  computed: {
    user: {
      get() {
        return this.$store.state.user;
      },
      set(v) {
        this.$store.state.user = v;
      }
    }
  },
  methods: {
    clicks(){
      alert('点击了')
    },
    getPic(pic) {
      let path = "http://localhost:3000/images/" + pic;
      console.log(path);
      return path;
    },
    delCollect(index) {
      var collectionId = this.products[index].collectionId;
      this.$axios
        .delete("http://localhost:3000/collection/delProduct/" + collectionId)
        .then(res => {
          console.log("删除收藏");
          this.products.splice(index, 1);
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    console.log("userId" + this.user[0].userId);
    this.$axios
      .get("http://localhost:3000/collection/getUser", {
        params: { userId: this.user[0].userId }
      })
      .then(res => {
        console.log("收藏", res.data.data);
        this.products = res.data.data;
        this.isExistCollect = true;
        this.$store.state.collectCount = this.products.length;
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>
<style lang="css" scoped>
.mydis {
  margin: 20px 0;
}
.order .el-col {
  margin-bottom: 20px;
}
.el-button i {
  font-size: 20px;
}
.image {
  width: 250px;
  height: 250px;
}
.ww {
  width: 850px;
  height: 280px;
  color: #aaa;
  line-height: 280px;
}
</style>